<template>
  <div class="main">
    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :span="4">
        <el-button @click="addShop" type="primary" icon="el-icon-plus">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData"  border style="margin-top: 30px">
      <el-table-column prop="province" show-overflow-tooltip width="200" label="区域名称"></el-table-column>

      <el-table-column prop="city" show-overflow-tooltip min-width="300"  label="子区域名称 ">
        <template slot-scope="scope">
          {{scope.row.city.join('、')}}
        </template>
      </el-table-column>

      <el-table-column fixed="right" width="300" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateShop(scope.row)">修改</el-button>
          <el-button type="primary" size="mini" icon="el-icon-view" @click="viewShop(scope.row)">查看</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="区域管理"
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="省级名称">
          <el-input v-model="form.province"></el-input>
        </el-form-item>

        <el-form-item label="市名称">
          <el-input  v-model="form.city"></el-input>
          <div style="color: #787be8;font-size: 12px">多个区域使用,号分割</div>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="isEdit" @click="dialogVisible = false">取消</el-button>
        <el-button v-if="isEdit" type="primary" @click="dialogVisible = false">确定</el-button>
        <el-button v-if="!isEdit" type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>


    <div class="box-pager">
      <lz-pages v-model="pager" @change="getLists"/>
    </div>

  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import axios from "axios";

export default {
  data() {
    return {
      currentPage1: 5,
      value1: '',
      pager: {},
      form: {},
      dialogVisible: false,
      isEdit: false,
      content:"",
      tableData: [
        {
          "id": 1,
          "province": "安徽省",
          "city":['合肥市','芜湖市','黄山市'],
        },

      ],
      options: [
        {value: 1, label: '公司介绍'},
        {value: 2, label: '联系我们'},
        {value: 3, label: '关于轮胎'},
        {value: 4, label: '消息中心顶部'},
        {value: 5, label: '关于我们'},
      ],
      optionsBrand:[
        {value: 0, label: '万达轮胎'},
        {value: 1, label: '雅克轮胎'},
        {value: 2, label: '斯卡轮胎'},
      ],
      value: ''
    }
  },
  methods: {
    parseTime,
    getLists() {

    },
    setMark(e) {
      console.log(e)
      this.mark = {lng: e.point.lng, lat: e.point.lat}
      this.reverseGeocode(e.point.lat,e.point.lng)
    },
    updateShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.isEdit = false
    },

    handleClose() {
      this.dialogVisible = false
    },

    status(val) {
      switch (val) {
        case 1: {
          return '公司介绍'
        }
        case 2: {
          return '联系我们'
        }
        case 3: {
          return '关于轮胎'
        }
        case 4: {
          return '消息中心顶部'
        }
        case 5: {
          return '关于我们'
        }
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
}

.main {
  width: 100%;
  height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
</style>
